<template>
	<view style="overflow: hidden;">
		<!-- 地图 -->
		<map id="map" ref="map" v-if="markers" style="width:100%;height:100vh;" :longitude="longitude"
			:latitude="latitude" :markers="markers" :scale="10" show-location @tap="()=>{flag=false}" @markertap="onmarkertap"
			:polygons="polygons">
			<cover-view slot="callout">
				<block v-for="(item,index) in list" :key="index">
					<cover-view class="customCallout" :marker-id="index">
						<cover-view class="content">
							外出人员姓名：{{item.userName}}
						</cover-view>
						<cover-view class="content">
							打卡时间：{{item.createTimeString}}
						</cover-view>
					</cover-view>
				</block>
			</cover-view>
		</map>
		<cover-view class="gender-wrap">
			<cover-view class="gender-item yf-flex-left">
				<cover-view class="gender-dot1"></cover-view>
				<cover-view class="gender-text">男性</cover-view>
			</cover-view>
			<cover-view class="gender-item yf-flex-left">
				<cover-view class="gender-dot2"></cover-view>
				<cover-view class="gender-text">女性</cover-view>
			</cover-view>
		</cover-view>
		<view class="date-wrap yf-flex-left">
			<image src="/static/common/date_icon.png" mode="" class="date-icon"></image>
			<picker mode="date" class="date-item yf-flex-center" :value="startTimeString" :start="startDate"
				:end="endDate" @change="bindDateChange(1,$event)">
				<view class="date-text" :style="{color:startTimeString!=''?'#101010':''}">
					{{startTimeString||'年/月/日'}}
				</view>
			</picker>
			<view class="date-hint">
				至
			</view>
			<picker mode="date" class="date-item yf-flex-center" :value="endTimeString" :start="startDate"
				:end="endDate" @change="bindDateChange(2,$event)">
				<view class="date-text" :style="{color:endTimeString!=''?'#101010':''}">
					{{endTimeString||'年/月/日'}}
				</view>
			</picker>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	export default {
		onLoad() {
			this.getCurrentMonthFirst(); //获取当月1号
			// this.getLocation();
			this.loadList();
		},
		data() {
			return {
				includePoints: [],
				markers: [],
				list: [], //打卡记录
				latitude: 28.160053,
				longitude: 115.771131,
				startTimeString: "", //开始时间
				endTimeString: "", //结束时间
			}
		},
		computed: {
			...mapState(['polygons']),
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate();
			}
		},
		methods: {
			//获取当前月份第一天和最后一天
			getCurrentMonthFirst() {
				let date = new Date();
				date.setDate(1);
				this.startTimeString = date.toISOString().slice(0, 10)
				this.endTimeString = this.endDate
			},
			// 选择日期
			bindDateChange: function(type, e) {
				if (type == 1) { //开始时间
					if (new Date(this.endTimeString).getTime() < new Date(e.detail.value).getTime()) {
						this.$api.msg("开始时间不能大于结束时间")
						return
					} else {
						this.startTimeString = e.detail.value
					}
				} else {
					if (new Date(e.detail.value).getTime() < new Date(this.startTimeString).getTime()) {
						this.$api.msg("结束时间不能小于开始时间")
						return
					} else {
						this.endTimeString = e.detail.value
					}
				}
				this.loadList()
			},
			// 获取时间
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			getLocation() {
				uni.getLocation({
					type: 'gcj02',
					success: res => {
						this.latitude = res.latitude
						this.longitude = res.longitude
					}
				});
			},
			// 加载列表
			loadList() {
				let that = this;
				let _params = {
					pageNum: 1,
					pageSize: 1000,
					isAsc: 'asc',
				}
				if (that.startTimeString && that.endTimeString) { //时间筛选
					_params.startTimeString = that.startTimeString;
					_params.endTimeString = that.endTimeString;
				}
				that.$api.showLoading();
				that.$apis.getClockList(_params).then(result => {
					that.$api.hideLoading();
					let _data = result;
					if (_data.code === 0) {
						//判断是否有数据，有则取数据 
						that.list = _data.rows;
						that.markers = [];
						that.getMapList(_data.rows);
					} else {
						that.$api.hideLoading();
					}
				});
			},
			// 点击标记
			onmarkertap(e) {
				console.log(e, "eeeeeeeee")
				let _this = this;
				let id = e.detail.markerId;
				//‘BYCLICK’:点击显示; ‘ALWAYS’:常显
				_this.markers.forEach((item) => {
					if (item.id == id) { //找到对应id
						if (item.customCallout.display == 'BYCLICK') {
							item.customCallout.display = 'ALWAYS';
							return;
						} else if (item.customCallout.display == 'ALWAYS') {
							item.customCallout.display = 'BYCLICK';
							return;
						}
					} else {
						item.customCallout.display = 'BYCLICK';
					}
				})
			},
			//获取地图数据
			getMapList(val) {
				uni.showLoading({
					title: "加载中",
					mask: true,
				});
				var self = this
				let arr = val
				console.log(arr);
				arr.forEach((item, index) => {
					//   向聚合点数据赋值参数
					if (!item.latitude || !item.longitude) {
						return
					}
					this.includePoints.push({
						latitude: Number(item.latitude).toFixed(6),
						longitude: Number(item.longitude).toFixed(6)
					})
					//map地图要展示的点
					this.markers.push({
						id: Number(index),
						longitude: Number(item.longitude).toFixed(6),
						latitude: Number(item.latitude).toFixed(6),
						iconPath: item.sex == "女" ? '/static/common/woman_icon.png' :
							'/static/common/man_icon.png',
						title: item.name,
						width: uni.upx2px(60),
						height: uni.upx2px(60),
						customCallout: {
							anchorX: 0,
							anchorY: 0,
							display: 'BYCLICK'
						},
						joinCluster: false,
						info: item
					})
				})
				//定义控制map组件
				// let mapCommand = uni.createMapContext('map', this)
				// //缩放视野展示所有经纬度
				// mapCommand.includePoints({
				// 	points: [...this.includePoints],
				// 	padding: [150, 150, 150, 150]
				// })
				// //初始化聚合点配置
				// mapCommand.initMarkerCluster({
				// 	enableDefaultStyle: false, // 是否采用默认聚合点样式
				// 	zoomOnClick: true, //点击已经聚合的聚合点是否分离
				// 	gridSize: 20, //可聚合距离
				// })

				// // 新的聚合簇产生时触发
				// mapCommand.on("markerClusterCreate", (e) => {
				// 	console.log('clusters', e);
				// 	let clusterMarkers = []
				// 	const clusters = e.clusters // 新产生的聚合簇
				// 	clusters.forEach((cluster, index) => {
				// 		const {
				// 			center, // 聚合点的经纬度数组
				// 			clusterId, // 聚合簇id
				// 			markerIds // 已经聚合了的标记点id数组
				// 		} = cluster

				// 		let clusterObj = {
				// 			clusterId, //必须
				// 			...center,
				// 			width: 0,
				// 			height: 0,
				// 			iconPath: '',
				// 			label: { // 定制聚合簇样式
				// 				content: markerIds.length + '',
				// 				fontSize: 16,
				// 				color: '#fff',
				// 				width: 40,
				// 				height: 40,
				// 				bgColor: '#00000058',
				// 				borderRadius: 40,
				// 				textAlign: 'center',
				// 				anchorX: -10,
				// 				anchorY: -35,

				// 			}
				// 		}
				// 		clusterMarkers.push(clusterObj)
				// 	})
				// 	mapCommand.addMarkers({
				// 		markers: clusterMarkers,
				// 		clear: false, //是否先清空地图上所有的marker
				// 	})

				// })
				uni.hideLoading();
			}
		}
	}
</script>

<style lang="scss">
	.gender-wrap {
		position: fixed;
		right: 30rpx;
		bottom: 40rpx;
		width: 160rpx;
		height: 114rpx;
		border-radius: 20rpx;
		background: #fff;
		z-index: 2;

		.gender-item {
			height: 57rpx;
			width: 100%;
			padding: 0 30rpx;

			.gender-dot1 {
				width: 20rpx;
				height: 20rpx;
				background: #0074F2;
				border-radius: 50%;
			}

			.gender-dot2 {
				width: 20rpx;
				height: 20rpx;
				background: #FF0000;
				border-radius: 50%;
			}

			.gender-text {
				font-size: 12+24rpx;
				margin-left: 10rpx;
			}
		}
	}

	.customCallout {
		width: 320rpx;
		padding: 24rpx;
		border-radius: 10rpx;
		background: #fff;
		font-size: 12+24rpx;
		margin-bottom: 10rpx;
		z-index: 10;

		.content {
			word-break: break-all;
			word-wrap: break-word;
			white-space: pre-line;
		}
	}

	.date-wrap {
		height: 70rpx;
		padding: 0 20rpx;
		border-radius: 40rpx;
		border: 1rpx solid #bbb;
		width: 690rpx;
		position: fixed;
		left: 30rpx;
		top: 34rpx;
		z-index: 2;
		background: #fff;

		.date-icon {
			width: 35rpx;
			height: 35rpx;
		}

		.date-hint {
			font-size: 12+24rpx;
		}

		.date-item {
			flex: 1;

			.date-text {
				font-size: 12+24rpx;
				color: #A1A1A1;
			}
		}
	}
</style>